//  useState使用状态
// useEffect使用副作用（模拟生命周期和监听）
// useRef 使用也能用
 import {useState,useEffect} from 'react'

// useEffect 使用副作用（在函数组件模拟生命周期）

function App() {
  // 新闻笑话列表
  const [list,setList] = useState([])
  // 分页
  const [page,setPage] = useState(1);
  // 是否可以加载更多（上一次加载是否完毕）
  const [can,setCan] = useState(true);
  // 获取新闻与笑话
  const getJok = ()=>{
    setCan(false);
    // fetch原生ajax请求方法（ES6）
    fetch("http://dida100.com/mi/list.php?channel_id=c6&page="+page)
    .then(res=>res.json()) //fetch请求的数据是数据流，转换为json字符串
    .then(res=>{  //获取到数据
      setList(list.concat(res.result)); //把数据和以前数据组合  
      setCan(true); //可以加载下一个了

       
    })
    .catch(err=>console.log("err",err))
  }

  // 
  // 只要page发生变化执行getJok
  useEffect(()=>{
    getJok();
   
  },[page])
  function onScroll(){
    var  last = document.querySelector(".list .item:last-child");
    // 如果没有last返回
    if(!last){return}
    var top = last.getBoundingClientRect().top;
    if(top<window.innerHeight&&can){
      setPage(page+1)
    }
  }
  useEffect(()=>{   
     onScroll(); //默认检查一次
    window.addEventListener("scroll",onScroll); //滚动也检测一次
    return ()=>window.removeEventListener("scroll",onScroll)
  },[list]) // list发生变化（新闻数据变化，就要检测）
 

  // 什么时候调用？那个生命周期挂载，在函数组件模拟挂载完毕
  return ( <div>
    <h1>爱笑话</h1>
    <div  className='list'>
      {list.map((item)=><div className="item" key={item.docid}>{item.title}</div>)}
    </div>
 
  </div> );
}

// 16:20
export default App;